<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./js/vue.js"></script>
</head>

<style>
  .cls {
    color:red;
  }
</style>

<body>
  <div id="app">
    <table border="1px" cellspacing="0" width="50%" style="text-align: center;">
      <tr >
        <th>编号</th>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
        <th>成绩</th>
        <th>等级</th>

      </tr>
      <tr v-for="(item,index) in users">
        <td>{{index +1}}</td>
        <td>{{item.name}}</td>
        <td>{{item.age}}</td>
        <td>{{item.gender==1?"男" : "女"}}</td>
        <td>{{item.score}}</td>
        <td>
          <span v-if="item.score>=85&& item.score<=100">优秀</span>
          <span v-else-if="item.score<=84 && item.score >=60">及格</span>
          <span class="cls" v-else-if="item.score<=59 && item.score >=0">不及格</span>
          <span class="cls" v-else="item.score<0 || item.score >100">数据有误.</span>

        </td>
      </tr>




    </table>



  </div>




</body>

<script>
  new Vue({
    el: "#app",
    data: {
      users: [{
          name: "Tom",
          age: 20,
          gender: 1,
          score: 78,
        },
        {
          name: "Rose",
          age: 18,
          gender: 2,
          score: 86,
        },
        {
          name: "Jerry",
          age: 26,
          gender: 1,
          score: 190,
        },
        {
          name: "Tony",
          age: 30,
          gender: 1,
          score: 52,
        },
      ],
    },
  });
</script>


</html>